<template>
	<div class="admin-task-index">
		<div class="task-search">
			<div class="task-search-seting">
				<div class="task-search_set">设置</div>
			</div>
			<div class="task-search_martio">
				<div class="task-search_text">任务大厅</div>
				<div class="task-search_top">
					<div class="task-search_box">
						<i class="el-icon-search"></i>
						<el-input placeholder="请输入名称、简介、Id" v-model="searchValue" @input="search"></el-input>
					</div>
					<div class="task-search_but" @click="search">搜索</div>
				</div>
			</div>
		</div>
		<div v-loading="isLoading">
			<ul class="admin-task-index_ul" v-if="viewModel.length!=0">
				<li class="admin-task-index_li" v-for="(item,index) in viewModel" :key="index">
					<div class="admin-task-index_box">
						<div class="admin-task-index_btop">
							<div class="admin-task-index_right">
								<x-image :src="item.icon"></x-image>
							</div>
							<div class="admin-task-index_left">
								<div class="admin-task-index_t1">{{item.name}}</div>
								<div class="admin-task-index_p2"><span :class="{'admin-task-index_span':item.isEnable,'admin-task-index_span-1':!item.isEnable}">{{taskEnable(item.isEnable)}}</span>{{item.intro}}</div>
							</div>
						</div>
						<div class="admin-task-index_p4">
							<router-link class="p4-buts" :to="'/admin/task/edit?key=' + item.key"><i class="el-icon-s-tools"></i>设置</router-link>
							<router-link class="p4-buts" :to="'/admin/TaskJobProgress/List?taskId=' + item.taskId"><i class="el-icon-edit-outline"></i>进度</router-link>
							<router-link class="p4-buts" :to="'/admin/TaskJobRecord/List?TaskId=' + item.taskId"><i class="el-icon-tickets"></i>记录</router-link>
							<router-link class="p4-buts" :to="'/admin/TaskJobReward/List?TaskId=' + item.taskId"><i class="icon-5333-icon51"></i>收益</router-link>
							<router-link class="p4-buts" :to="'/admin/TaskJob/Report?TaskId=' + item.taskId"><i class="icon-5333-biaoshji"></i>统计</router-link>
						</div>
					</div>
				</li>
			</ul>
			<zk-nodata v-else></zk-nodata>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				searchValue: '',
				viewModel: [],
				isLoading: true,
				grabbleModel: null,
				widgetValue: []
			}
		},
		props: {
			widget: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var repones = await this.$api.taskJobAll()
				if (this.widget.value) {
					if (this.widget.value.ids) {
						this.widgetValue = this.widget.value.ids
					} else {
						this.widgetValue = []
					}
				}
				this.viewModel = this.arrayWeight(repones, this.widgetValue)
				this.grabbleModel = this.arrayWeight(repones, this.widgetValue)
				this.isLoading = false
			},
			arrayWeight(val, data) {
				var arr = val.filter(item => {
					var arr1 = data.map(v => v)
					return !arr1.includes(item.id)
				})
				return arr
			},
			taskEnable(val) {
				return val ? '已开启' : '未开启'
			},
			async execute(val) {

			},
			search() {
				var arr = []
				if (this.searchValue) {
					this.grabbleModel.forEach((res) => {
						if (res.name.indexOf(this.searchValue) > -1 || res.taskId.indexOf(this.searchValue) > -1 || res.intro.indexOf(this.searchValue) > -1) {
							arr.push(res)
						}
					})
				} else {
					arr = this.grabbleModel
				}
				this.viewModel = arr
			}
		}
	}
</script>
<style lang="scss">
	@import "./var.scss";
</style>